<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function changeDiv(){
				var d=document.getElementById("d1");
				//d.align="right";
				d.setAttribute("align","center");
				//d.firstElementChild.setAttribute("src","../img/dog.jpg");
				d.firstElementChild.src="../img/dog.jpg";
			}
			function createImg(){
				var i=document.createElement("img");
				i.setAttribute("src","../img/dog.jpg");
				i.setAttribute("height","60px");
				i.setAttribute("width","120px");
				i.setAttribute("title","好美的狗");
				
				//加到body后面
				//document.body.appendChild(i);
				document.getElementById("d1").appendChild(i);
			}
			function createImg2(){
				var i=document.createElement("img");
				i.setAttribute("src","../img/dog.jpg");
				i.setAttribute("height",(Math.random()*400)+"px");
				i.setAttribute("width","120px");
				i.setAttribute("title","好美的狗");
				document.getElementById("d1").insertBefore(i,document.getElementById("d1").firstElementChild);
			}
			function cloneDiv(){
				var d=document.getElementById("d1");
				var d2=d.cloneNode(true);
				document.body.appendChild(d2);
			}
			function delDog(){
				var d=document.getElementById("dog");
				//document.body.removeChild(d);
				document.getElementById("d1").removeChild(d);
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<img src="../img/dog2.jpg" id="dog"/>
		</div>
		<input type="button" value="改变Div"  onclick="changeDiv()"/>
		<input type="button" value="创建新元素，加到后面" onclick="createImg()"/>
		<input type="button" value="创建新元素，加到前面" onclick="createImg2()"/>
		
		<input type="button" value="克隆div,加到后面" onclick="cloneDiv()"/>
		
		<input type="button" value="删除小狗" onclick="delDog()"/>
	</body>
</html>
